import React from 'react'
import {withRouter} from 'react-router-dom'
import {Layout, Menu, Breadcrumb, Dropdown, Avatar} from 'antd';
import {authRoutes} from '../../routes/routes'
import logo from './logo.svg'
import {clearToken} from '../../utils/auth'
import './index.less'
import {DownOutlined} from "@ant-design/icons";

const {Header, Content, Footer, Sider} = Layout;

const menus = authRoutes.filter(route => route.isShow)

class Frame extends React.Component {
    constructor(props) {
        super(props)
        // this.data 就相当于vue中的data（）{return{}} 是可读可写的
        this.menu = (
            <Menu onClick={(p) => {
                if (p.key === 'logout') {
                    clearToken()
                    this.props.history.push('/login')
                }
            }}>
                <Menu.Item key='notification'>
                    通知中心
                </Menu.Item>
                <Menu.Item key='setting'>
                    设置
                </Menu.Item>
                <Menu.Item key='logout'>
                    退出
                </Menu.Item>
            </Menu>
        );
    }

    state = {
        collapsed: false,
        width: 200,
    };

    onCollapse = collapsed => {
        this.setState({collapsed});
    };

    render() {
        const {collapsed} = this.state;
        return (
            <Layout id={'frame-layout'} style={{minHeight: '100vh'}}>
                <Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
                    <div className="ant-pro-sider-logo">
                        <img src={logo} alt="logo"/>
                        <h1 className='logo-h1' style={{display:collapsed?'none':''}}>Best Admin</h1>
                    </div>

                    <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
                        {menus.map(menu => {
                            return (
                                <Menu.Item
                                    key={menu.path} icon={menu.icon}
                                    onClick={param => this.props.history.push(param.key)}>
                                    {menu.title}
                                </Menu.Item>
                            )
                        })}
                    </Menu>
                </Sider>
                <Layout className="layout">
                    <Header className="layout-header" style={{padding: 0}}>
                        <Dropdown className='header-dropdown' overlay={this.menu}>
                            <div>
                                <Avatar>U</Avatar>
                                <span>超级管理员</span>
                                <DownOutlined/>
                            </div>
                        </Dropdown>
                    </Header>
                    <Content style={{margin: '0 16px', padding: '16px 0'}}>
                        <div className="site-layout-background" style={{padding: 24, minHeight: '100%'}}>
                            {this.props.children}
                        </div>
                    </Content>
                    <Footer style={{textAlign: 'center'}}>Bsst Admin ©2021 Created by Leo</Footer>
                </Layout>
            </Layout>
        );
    }
}

export default withRouter(Frame);
